<template>
  <view class="loginLayout" v-if="way === 'loginWay'">
    <text class="title">
      <h1>账 号 登 录</h1>
    </text>
    <view class="senter">
      <view class="inputBox">
        <input type="text" class="inp" placeholder="请输入登录账号" v-model="loginInp.zhangHao" />
        <input type="password" class="inp" placeholder="请输入登录密码" v-model="loginInp.miMa" />
      </view>
      <view class="butBox">
        <button class="but" @click="loginOk" :disabled="!loginBtnStatuss" :style="{
          color: loginBtnStatuss ? '#fff' : '#fdeeee',
          backgroundColor: loginBtnStatuss ? '#77c2f8' : '#b8def9'
        }">
          登 录
        </button>
      </view>
    </view>
    <view class="footer">
      <view class="box" @click="setWay('otherWay')">
        <view class="icon">
          <uni-icons type="personadd" color="#666" size="30"></uni-icons>
        </view>
        <text>短信登录</text>
      </view>
      <view class="box" @click="setWay('zhuCeWay')">
        <view class="icon">
          <uni-icons type="plusempty" color="#666" size="30"></uni-icons>
        </view>
        <text>注册</text>
      </view>
    </view>
  </view>
  <view class="loginLayout" v-else-if="way === 'otherWay'">
    <text class="title">
      <h1>短 信 登 录</h1>
    </text>
    <view class="senter">
      <view class="inputBox">
        <input type="text" class="inp" placeholder="请输入手机号" v-model="otherInp.phoneNum" />
        <view class="imgNum">
          <input type="text" class="imgNumInp" placeholder="请输入图像验证码" v-model="otherInp.imgNum" />
          <image src="../../static/logo.png" />
        </view>
        <input type="text" class="inp" placeholder="请输入短信密码" v-model="otherInp.mesNum" />
      </view>
      <view class="butBox">
        <!-- @click="otherLoginOk" -->
        <button class="inpOk" :disabled="!(otherInp.phoneNum && otherInp.imgNum && otherInp.mesNum)" :style="{
          color: otherInp.phoneNum && otherInp.imgNum && otherInp.mesNum ? '#fff' : '#fdeeee',
          backgroundColor: otherInp.phoneNum && otherInp.imgNum && otherInp.mesNum ? '#77c2f8' : '#b8def9'
        }">
          登 录
        </button>
      </view>
    </view>
    <view class="footer">
      <view class="box" @click="setWay('loginWay')">
        <view class="icon">
          <uni-icons type="person" color="#666" size="30"></uni-icons>
        </view>
        <text>账号登录</text>
      </view>
      <view class="box" @click="setWay('zhuCeWay')">
        <view class="icon">
          <uni-icons type="plusempty" color="#666" size="30"></uni-icons>
        </view>
        <text>注册</text>
      </view>
    </view>
  </view>
  <view class="loginLayout" v-if="way === 'zhuCeWay'">
    <text class="title">
      <h1>账 号 注 册</h1>
    </text>
    <view class="senter">
      <view class="inputBox">
        <input type="text" class="inp" placeholder="请输入用户名" v-model="zhuCeInp.zhanghao" />
        <input type="password" class="inp" placeholder="请输入密码" v-model="zhuCeInp.miMa" />
        <input type="password" class="inp" placeholder="请再次输入密码" v-model="zhuCeInp.miMaAgain" />
      </view>
      <view class="butBox">
        <button class="zhuCeOk" @click="zhuCeOk" :disabled="!registerBtnStatuss" :style="{
          color: registerBtnStatuss ? '#fff' : '#fdeeee',
          backgroundColor: registerBtnStatuss ? '#77c2f8' : '#b8def9'
        }">
          注 册
        </button>
      </view>
    </view>
    <view class="footer">
      <view class="box" @click="setWay('loginWay')">
        <view class="icon">
          <uni-icons type="person" color="#666" size="30"></uni-icons>
        </view>
        <text>账号登录</text>
      </view>
      <view class="box" @click="setWay('otherWay')">
        <view class="icon">
          <uni-icons type="personadd" color="#666" size="30"></uni-icons>
        </view>
        <text>短信登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { login, register } from "@/api/login.js"
import { onLoad, onShow } from "@dcloudio/uni-app";
import { computed, onUnmounted, ref, watch } from 'vue'
import { useUserStore } from "../../store/modules/user"
//pinia的获取用户信息
let userStore = useUserStore()
//登录方式 (默认登录loginWay)
const way = ref('loginWay')
watch(way, (newway) => {
  if (newway === 'zhuCeWay') {
    uni.showModal({
      title: '注意',
      content: '注册用户名位数是1-16位,密码至少4位',
      showCancel: false,
    })
  }
}, {
  once: true
})
watch(() => way.value, (newway) => {
  if (newway === 'otherWay') {
    uni.showModal({
      title: '注意',
      content: '功能正在开发请使用ID登录',
      showCancel: false,
      complete: ({ confirm }) => {
        if (confirm) {
          way.value = "loginWay"
        }
      },
    })
  }
})
// 点击修改对应方式
const setWay = wayValue => {
  way.value = wayValue
}
//表单数据
//登录
const loginInp = ref({
  zhangHao: '',
  miMa: ''
})
let loginBtnStatuss = computed(() => {
  return loginInp.value.zhangHao.length >= 1 && loginInp.value.miMa.length >= 4
})
//其他登录
const otherInp = ref({
  phoneNum: '',
  imgNmu: '',
  mesNum: ''
})
//注册
const zhuCeInp = ref({
  zhanghao: '',
  miMa: '',
  miMaAgain: ''
})
let registerBtnStatuss = computed(() => {
  return zhuCeInp.value.zhanghao.length >= 1
    && zhuCeInp.value.zhanghao.length <= 16
    && zhuCeInp.value.miMa.length >= 4
    && zhuCeInp.value.miMaAgain.length >= 4
})

const loginOk = async () => {
  try {
    uni.showLoading({
      mask: true,
    })
    if (Number.isNaN(+loginInp.value.zhangHao)) {
      uni.showToast({
        title: '账号应为纯数字',
        icon: 'error',
        duration: 1000,
        mask: true
      })
      return
    }
    let res = await login({
      userId: loginInp.value.zhangHao,
      pwd: loginInp.value.miMa
    })
    if (res.status == 200) {
      uni.setStorageSync('token', res.data.token)
      uni.setStorageSync('user', res.data.user)
      uni.hideLoading()
      uni.switchTab({ url: `/pages/chatList/chatList` })
    }
  } catch (err) {
    uni.showToast({
      title: '账号或密码错误',
      icon: 'error',
      duration: 1000,
      mask: true
    })
  }
}
const zhuCeOk = async () => {
  if (zhuCeInp.value.miMa != zhuCeInp.value.miMaAgain) {
    return uni.showToast({
      title: '两次密码不一致',
      icon: "error",
      duration: 1000,
      mask: true
    })
  }
  try {
    uni.showLoading({ mask: true })
    let res = await register({ nickname: zhuCeInp.value.zhanghao, pwd: zhuCeInp.value.miMa })
    if (res.status == 200) {
      uni.hideLoading()
      uni.showModal({
        title: '注册成功',
        content: `你的账号是${res.uid},请记住!`,
        showCancel: false,
        confirmText: '去登录',
        success: ({ confirm }) => {
          if (confirm) {
            loginInp.value.zhangHao = `${res.uid}`
            loginInp.value.miMa = zhuCeInp.value.miMa
            way.value = 'loginWay'
            zhuCeInp.value.miMa = ''
            zhuCeInp.value.zhanghao = ''
            zhuCeInp.value.miMaAgain = ''
          }
        }
      })
    }
    uni.hideLoading()
  } catch (err) {
    uni.hideLoading()
  }
}
onLoad(() => {
  let user = uni.getStorageSync('user')
  //重置键盘高度
  uni.setStorageSync('heightForMore', 750)
  userStore.user = user
  uni.setNavigationBarTitle({
    title: '登录/注册',
  })
})
onShow(() => {
  if (userStore.user) {
    uni.switchTab({ url: `/pages/chatList/chatList` })
  }
})

</script>

<style lang="less" scoped>
.loginLayout {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  position: relative;
  background-color: #f2def7;
  background-image: linear-gradient(117deg, #f2def7 17%, #c8dfff 43%, #efe0ff 90%);
  backdrop-filter: blur(10rpx);

  .title {
    margin-top: 15vh;
    font: normal 600 50rpx Helvetica;
  }

  .senter {
    margin-top: 8vh;

    .inputBox {
      padding: 30rpx;

      .inp {
        width: 70vw;
        height: 100rpx;
        padding: 0 20rpx;
        text-align: center;
        background: #ffffff;
        margin-bottom: 30rpx;
        border-radius: 15rpx;
      }

      .imgNum {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 70vw;
        height: 100rpx;

        .imgNumInp {
          width: 60%;
          height: 100%;
          text-align: center;
          background: #ffffff;
          margin-bottom: 30rpx;
          border-radius: 15rpx;
        }

        image {
          width: 30%;
          height: 100%;
          border-radius: 15rpx;
        }
      }
    }

    .butBox {
      .but {
        width: 70vw;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 15rpx;
      }
    }
  }

  .footer {
    position: absolute;
    top: 70vh;
    width: 70vw;
    display: flex;
    justify-content: space-around;

    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .icon {
        width: 80rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border: #d0d0d0 1rpx solid;
        border-radius: 50%;
      }

      text {
        font-size: 30rpx;
        color: #666;
        margin-top: 15rpx;
      }
    }
  }
}

// linear-gradient(to bottom,transparent,#fff 400rpx ),
// linear-gradient(to right,#beecd8 20%,#f4e2d8);</style>
